<!-- 
功能：搜索组件 
-->
<template>
    <div class="search_box" ref="searchRef">
        <template v-for="(item, index) in props.options">
            <div class="search_item">
                <div class="item_label">{{ item.label }}</div>
                <!-- 输入框组件 -->
                <template v-if="item.type == 'input'">
                    <Input v-model="searchObj[item.model]" :placeholder="item.placeholder" clearable />
                </template>
                <!-- 下拉框组件 -->
                <template v-if="item.type == 'select'">
                    <Select v-model="searchObj[item.model]" clearable :placeholder="item.placeholder">
                        <Option v-for="itemTwo in item.dataList" :value="itemTwo.id" :key="itemTwo.id"
                            :multiple="item.multiple">{{ itemTwo.name }}</Option>
                    </Select>
                </template>
                <!-- 日期选择器 -->
                <template v-if="item.type == 'date'">
                    <DatePicker v-model="searchObj[item.model]" type="datetime" clearable style="width: 100%;"
                        :placeholder="item.placeholder" @on-change="changeDate($event, item.model)" />
                </template>
                <!-- 日期时间联动选择器 -->
                <template v-if="item.type == 'datetimerange'">
                    <DatePicker v-model="searchObj[item.model]" type="datetimerange" clearable placement="bottom-end" style="width: 100%;"
                        :placeholder="item.placeholder" format="yyyy-MM-dd HH:mm" @on-change="changeDateRange($event, item.model)" />
                </template>
                 <!-- 日期联动选择器 -->
                 <template v-if="item.type == 'daterange'">
                    <DatePicker v-model="searchObj[item.model]" type="daterange" clearable placement="bottom-end" style="width: 100%;"
                        :placeholder="item.placeholder" format="yyyy-MM-dd" @on-change="changeDateRange($event, item.model)" />
                </template>
            </div>
        </template>
        <div class="search_btns">
            <Button type="primary" @click="handleSearch">搜索</Button>
            <Button @click="reset">重置</Button>
        </div>
    </div>
</template>
<script setup>
import { ref, toRefs, watch, onMounted } from "vue";

const emits = defineEmits(['search', 'reset', 'update:modelValue', 'getHeight']);

const searchRef = ref(null);

const props = defineProps({
    /*
        * @description: 搜索条件配置
        * @type: Object
        * @default: {
        * type: input 输入框 select 下拉框 date 日期选择器 daterange 日期范围选择器
        * model: 绑定的值
        * placeholder: 提示文字
        * dataList: 下拉框数据
        * multiple: 是否多选
        * label: 标签
        * }
    */
    options: {
        type: Array,
        default: [],
    },
    modelValue: {
        type: Object,
        default: () => ({})
    }
});

const { modelValue } = toRefs(props);
const searchObj = ref({ ...modelValue.value });

/**
 * 监听搜索条件变化
 */
watch(searchObj, (newValue) => {
    emits('update:modelValue', newValue);
}, { deep: true });

/**
 * 日期格式化
 * @param {String} dateStr 日期字符串
 */
const changeDateStr = (dateStr) => {
    if (!dateStr) return '';
    // 创建 Date 对象
    let date = new Date(dateStr);
    // 获取年、月、日、时、分、秒
    let year = date.getFullYear();
    let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要加1
    let day = String(date.getDate()).padStart(2, '0');
    let hours = String(date.getHours()).padStart(2, '0');
    let minutes = String(date.getMinutes()).padStart(2, '0');
    let seconds = String(date.getSeconds()).padStart(2, '0');
    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
};

/**
 * 日期选择器
 * @param {String} date 日期   @param {String} model 绑定的值
 */
const changeDate = (date, model) => {
    searchObj[model] = changeDateStr(date);
};

/**
 * 日期选择器
 * @param {String} date 日期   @param {String} model 绑定的值
 */
const changeDateRange = (date, model) => {
    searchObj[model] = date.map((item) => changeDateStr(item));
};

/**
 * 搜索
 */
const handleSearch = () => {
    emits('search');
};

/**
 * 重置搜索条件
 */
const reset = () => {
    searchObj.value = {};
    emits('update:modelValue', searchObj.value);
};


onMounted(() => {
    emits('getHeight', searchRef.value.offsetHeight);
})
</script>
<style lang="scss" scoped>
.search_box {
    padding: 10px;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    margin-top: 8px;
    // .ivu-space {
    //     width: calc(20% - 20px);
    //     margin-right: 20px;
    //     margin-bottom: 15px;
    //     min-width: 250px;

    //     :deep(.ivu-space-item) {
    //         width: 100%;

    //         &:first-child {
    //             width: auto;
    //             flex-shrink: 0;
    //             min-width: 70px;
    //         }
    //     }
    //     &:nth-last-child(2) {
    //         // width: 20% !important;
    //         // margin-right: 0px !important;
    //     }
    // }
    .search_item {
        display: flex;
        width: 25%;
        align-items: center;
        margin-bottom: 15px;
        .item_label {
            width: 150px;
            text-align: right;
            margin-right: 10px;
        }
    }
    
    .search_btns {
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 15px;
        button {
            margin-left: 15px;
        }
    }
}
</style>